<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link rel="stylesheet" href="../static/css/simplemde.min.css">

    <title>Markdown编辑器</title>
    <style>
        .title-content {
            border: none;
            outline: none;
            color: black;
            font-size: 2rem;
            width: 50%;
        }

        .top-header {
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            align-items: center;
            margin: 20px;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="alert alert-danger" role="alert" id="alert" style="display: none"></div>
    <div class="top-header">
        <input type="text" placeholder="请输入文章标题..." class="title-content" id="blog-title" value="">
        <button type="button" class="btn btn-primary" id="submit">发布文章</button>
    </div>
    <div>
        <textarea id="editor"></textarea>
    </div>
    <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../static/js/simplemde.min.js"></script>
    <script>
        $(document).ready(function () {
            var simplemde = new SimpleMDE({
                element: document.getElementById("editor"),
                status: false,
                autoDownloadFontAwesome: false,
                tabSize: 4,
                renderingConfig: {
                    codeSyntaxHighlighting: true
                },
            });
            simplemde.toggleSideBySide();

            $('#submit').click(function(){
                var title = $("#blog-title").val();
                var origin = simplemde.value();
                var content = simplemde.markdown(origin);
                if(title.length == 0){
                    $('#alert').show();
                    $('#alert').text("请输入标题信息");
                    setTimeout(function(){
                        $("#alert").hide();  
                    },2000)
                }
                if(origin.length == 0){
                    $('#alert').show();
                    $('#alert').text("请输入具体的博客内容");
                    setTimeout(function(){
                        $("#alert").hide();  
                    },2000)
                }

                $.ajax({
                    url:'/editor',
                    method:'POST',
                    data:{title:title,origin:origin,content:content},
                    success:function(data){
                        alert(data)
                        var resp = JSON.parse(data)
                        if(resp.status == 0){
                            window.location.href="/blog";
                        }else{
                            alert(JSON.parse(resp.msg))
                        }
                    }
                })

            })
            
        });
    </script>
</body>

</html>